Lecture 2 : What is HTML?

Software Requirements

1. Install Visual Studio Code

This is a free piece of software from Microsoft that you will use to write your code. You can download it from the official website:

Install the following extensions to enhance your coding experience in Visual Studio Code:

• Live Preview
• Prettier
• Live Server

The Heading tag

Headings are tags used to define titles and subtitles on your page. They are crucial for creating a logical hierarchy and outline for your content.

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Here is the defined hierarchy of the heading tags

<h1>: The most important heading, typically used only once per page for the main title.

<h2>: A major section heading.

<h3>: A sub-section heading under an <h2>.

...and so on, down to <h6>, the least important heading.

The Purpose: To structure your document in a way that is understandable to both humans and machines (like search engines and screen readers). It is not just for making text big; it is for giving the text structural importance.

The Paragraph tag

What it is: The paragraph tag is the most common tag you'll use. It's for grouping sentences and blocks of text together.

The Tag:<p>

The Purpose: To define a distinct paragraph of text. Browsers automatically add a little bit of space before and after a <p> element, separating it from other content. You should not use multiple line breaks; you should use multiple paragraph tags.

For e.g.

The Horizontal Ruler

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page.

For e.g.

The Line Break Tag

The Line Break Tag: <br>

This tag tells the browser, "Stop writing on this line and immediately start on the next one." It's like hitting the Enter key once in a poem or an address.

Purpose: Creates a single line break.

For e.g.

Lists

HTML lists allow web developers to group a set of related items in lists.

There are two types of lists in HTML

• Unordered list
• Ordered list

Unordered list

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Ordered list

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

The Anchor Tag (<a>)

What it is: The Anchor tag is what makes the web "hypertext." It is used to create a hyperlink to another webpage, a file, or a location within the same page.

The Tag: <a>

The Purpose: To make text (or an image) clickable, allowing users to navigate. It requires an attribute called href (hypertext reference) to specify the destination URL.

HTML Links - The target Attribute

By default, a linked page will be displayed in the current browser window. To change this behavior, you can specify a different target using the target attribute.

The target attribute specifies where to open the linked document, and it can have one of the following values:

• _self: This is the default value. It opens the linked document in the same window or tab that was clicked.
• _blank: This value opens the document in a new window or tab.
• _parent: This opens the document in the parent frame of the current document.
• _top: This opens the document in the full body of the window, breaking out of any frames.

The Image Tag (<img>)

The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; they are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, contains attributes only, and does not have a closing tag.

The <img> Tag Attributes

The <img> tag has two required attributes, but also commonly uses optional attributes to control the image's dimensions:

• src: Specifies the path to the image.
• alt: Specifies an alternate text for the image.
• height: Specifies the height of the image in pixels.
• width: Specifies the width of the image in pixels.